 import React from 'react'
 // ===================================================================== Temp
 import Table from '#cpt/temp/Table'
 // ===================================================================== global declare
 const { $fn, $Lazy, $http } = window
 // ===================================================================== Lazy
const Page 		= $Lazy.load(()=>import('#tp/page/page-container'))
const Form 		= $Lazy.hook(()=>import('@antd/form/layout/form'))
const Button 	= $Lazy.load(()=>import('@antd/button'))
const FormItem 	= $Lazy.load(()=>import('#private/component/form/submit-item'))
const Title 	= $Lazy.load(()=>import('#tp/title/title-small'))
//
const message 	= $Lazy.file(()=>import('@antd/message'))
//
const StopReportModal 	= $Lazy.state(()=>import('#private/pages/stop-report-modal'))
 // ===================================================================== component
 class Index extends React.Component{
 	state = {
		data: [],
		selectedKeys:[]
 	}
 	
 	componentDidMount(){
		
 	}
 	
	// 表格
	cols = [
		{ title: '报告单编号',		dataIndex: 'spec_num' },
		{ title: '条码号', 			dataIndex: 'spec_code', 	...$fn.table.spec_code, width:'auto' },
	]
	// 解析条码
	getSpec(data){
		const arr = data.indexOf(',') >= 0 ? data.split(',') : data.split(/[\s\n]/)
		const stack = []
		arr.forEach(v => {
			if(!isNaN(+v) && (v.length === 12 || v.length === 14) ){
				stack.push(v)
			}
		})
		return Array.from(new Set(stack))
	}
	// 生成条码
	onSubmit = ({ spec }) => {
		const code = this.getSpec(spec)
		if($fn.hasArray(code)){
			const param = code.map( v => v)
			$http.submit(this,'auto-man/getValidSpecCode', { param: {spec_code: String(param)} }).then(data=>{
				if($fn.hasArray(data)){
					this.setState( { data } )
					message.then(f=>f.success('操作成功'))
				}else{
					message.then(f=>f.warning('报告单已终止'))
				}
			})
		}else{
			message.then(f=>f.warning('条码不符合规范，请检查'))
			return this.setState( { data: [ ]} )
		}
	}
	
 	render(){
		const { data, submitLoading, selectedKeys } = this.state
 		return (
 			<>
				<Page nobc title='批量终止报告单'>
					<Form onRef={ref=>this.form=ref} dir='x' className='submit-form small-form ex fv s8' onSubmit={this.onSubmit}>
						<div className='fx ex'>
							<div className='ex mr5 fv'>
								<Title title='条码录入'/>
								<FormItem wrapClassName='ex textarea-full bcf fv' style={{padding:'5px 5px 0'}} p='请输入条码' inputStyle={{height:'100%'}} name='spec' r mode='textarea' disabled={submitLoading}/>
								<div className='fxc bcf ptb5'><Button size='middle' label='确认' onClick={()=> this.form.submit() } loading={submitLoading}/></div>
							</div>
							{/* 表格 */}
							<div className='fv ex'>
								<Title title='条码列表' />
								<div className='fv ex bcf' style={{padding:'5px 5px 0'}}>
									{ Table.call(this, { wrapClassName:' ', space:' ' }) }
								</div>
								<div className='fxc bcf ptb5'>
									<Button 
										size		= 'middle' 
										loading		= { submitLoading } 
										disabled	= { !$fn.hasArray(selectedKeys) } 
										label		= '确认终止报告单' 
										onClick		= { () => this.stopReportModal.open({ids:selectedKeys, page_source: 'lab'}) } 
									/>
								</div>
							</div>
						</div>
					</Form>
				</Page>
				{/* 报告单终止 */}
				<StopReportModal onRef = { ref => this.stopReportModal = ref } api='kd-report-spec/abortReport' onRefresh={ ()=>{
					data.forEach( (v,i) => {
						selectedKeys.forEach( p => {
							if( v.uuid === p ) data[i] = null
						})
					} )
					this.setState({ data: data.filter(v => v !== null )  })
				} }/>
			</>
 		)
 	}
 }
 
 export default Index